<template>
  <transition name="detail">
  <div class="detail">
    <div class="detail-wrapper">
      <div class="img-wrapper" ref="imgWrapper" :style="{backgroundImage: `url('static/img/detail/${detailInfo.mainPic}')`}">
        <div class="back" @click="back" ref="headerBar">
          <img src="../../../../static/img/back.png"/>
        </div>
      </div>
      <div class="detail-scroll" ref="scrollWrapper">
        <scroll class="scroll-box"
                @scroll="scroll"
                :listen-scroll="listenScroll"
                :probe-type="probeType"
                :data="data"
                ref="detailscroll">
          <div class="wrapper">
            <div class="detail-content">
              <section class="description">
                <div class="left">
                  {{(detailInfo.price == 0)?'免费体检':detailInfo.price}}
                </div>
                <div class="right">
                  <p v-for="content in detailInfo.content">{{content}}</p>
                </div>
              </section>
            </div>
            <div class="list">
              <p class="title">产品详情</p>
            </div>
            <ul class="description">
              <li v-for="item in detailInfo.picList">
                <img :src="'static/img/detail/'+item+'.png'" @load="loadImg"/>
              </li>
            </ul>
          </div>
        </scroll>
      </div>
      <section class="footer" @click="openBottomSheet"><p>立即预约</p></section>
      <mu-bottom-sheet :open="bottomSheet" @close="closeBottomSheet">
        <mu-list @itemClick="closeBottomSheet">
          <div class="content-box">
            <p>{{detailInfo.description}}</p>
          </div>
          <div class="attention">
            <label class="choices-radio" for="comfirmSign">
              <input type="checkbox" :checked="check" name="choosePayment" ref="comfirmSign" id="comfirmSign" @click="comfirm"/>
              <i class="icon"></i>
            </label>
            <p>本人已阅读并同意<span>《保险条款》《投保提示书》《费率表》</span>全部内容</p>
          </div>
          <section class="list-footer"><p :class="{'list-active':check}" @click="appointment">确认预约</p></section>
        </mu-list>
      </mu-bottom-sheet>
    </div>
    <router-view></router-view>
  </div>
  </transition>
</template>

<script>
    import Scroll from "../../../components/scroll/scroll";
    import {prefixStyle} from "../../../common/js/dom";
    import {getPhysiatrics, getExamination} from "../../../api/ajax";
    import {ERR_OK} from "../../../api/config";

    const transform = prefixStyle('transform')

    export default {
      components: {Scroll},
      name: "detail",
      data () {
        return {
          scrollY: 0,
          data: [],
          bottomSheet: false,
          check: true,
          detailInfo: {}
        }
      },
      created () {
        this.listenScroll = true
        this.probeType = 3
        this._getDetailInfo()
      },
      mounted () {
        this.imageHeight = this.$refs.imgWrapper.clientHeight
        this.headerBarHeight = this.$refs.headerBar.clientHeight
        this.minTransalteY = -this.imageHeight + this.headerBarHeight
        this.$refs.scrollWrapper.style.top = `${this.imageHeight}px`

        this.$nextTick(() => {
          this.data = [0]
        })
        // setTimeout(() => {
        //   this.data = this.detailInfo
        // }, 20)
      },
      methods: {
        back () {
          this.$router.go(-1)
        },
        scroll (pos) {
          this.scrollY = pos.y
        },
        closeBottomSheet () {
          this.bottomSheet = false
        },
        openBottomSheet () {
          this.bottomSheet = true
        },
        comfirm () {
          this.$nextTick(() => {
            this.check = this.$refs.comfirmSign.checked
          })
        },
        appointment () {
          if (!this.check) {
            return
          }
          this.bottomSheet = false
          let selectedProj = JSON.stringify(this.detailInfo)
          localStorage.setItem('selectedProj', selectedProj)
          this.$router.push('/comfirmInfo')
        },
        _getPhysiatrics () {
          getPhysiatrics().then((res) => {
            let response = res.data
            if (response.code === ERR_OK) {
              let data = response.result
              data.forEach((item) => {
                if (item.detailId === this.id) {
                  this.detailInfo = item
                }
              })
            }
          }).catch((err) => {
            console.log('获取理疗列表失败')
          })
        },
        _getExamination () {
          getExamination().then((res) => {
            let response = res.data
            if (response.code === ERR_OK) {
              let data = response.result
              data.forEach((item) => {
                if (item.detailId === this.id) {
                  this.detailInfo = item
                }
              })
            }
          }).catch((err) => {
            console.log('获取体检列表失败')
          })
        },
        _getDetailInfo () {
          this.id = parseInt(this.$route.query.parentId)
          let target = this.$route.query.target
          if (target === 0) {
            this._getExamination()
          } else if (target === 1) {
            this._getPhysiatrics()
          }
        },
        loadImg () {
            setTimeout(() => {
              this.$refs.detailscroll.refresh()
            }, 20)
        }
      },
      computed: {

      },
      watch: {
        scrollY (newVal) {
          let translateY = Math.max(this.minTransalteY, newVal)
          let scale = 1
          let zIndex = 0
          const percent = Math.abs(newVal / this.imageHeight)
          // 简单的数学公式
          // scale = (this.imageHeight + newVal)/this.imageHeight) = 1 + newVal / this.imageHeight
          // 向下拉时
          if (newVal > 0) {
            scale = 1 + percent
            zIndex = 10
          } else {
            // blur = Math.min(20, percent * 20)
          }
          if (newVal < this.minTransalteY) {
            zIndex = 10
            this.$refs.imgWrapper.style.height = `${this.headerBarHeight}px`
            this.$refs.imgWrapper.style.paddingBottom = `${this.headerBarHeight}px`
            this.$refs.imgWrapper.style.backgroundSize = `100% ${this.imageHeight}px`
          } else {
            this.$refs.imgWrapper.style.height = `0px`
            this.$refs.imgWrapper.style.paddingBottom = `60%`
          }
          // this.$refs.scrollWrapper.style[transform] = `translate3d(0,${translateY}px,0)`
          this.$refs.imgWrapper.style[transform] = `scale(${scale})`
          this.$refs.imgWrapper.style.zIndex = zIndex
        }
      }
    }
</script>

<style scoped lang="scss">
  @import "../../../common/sass/mixin";
  .detail{
    position: absolute;
    top: 0;
    left: 0;
    /*padding-top: 90px;*/
    height: 100%;
    width: 100%;
    z-index: 9999;
    background-color: #f4f4f4;
    flex-direction: column;
    overflow: hidden;
    .detail-wrapper{
      position: relative;
      height: 100%;
      width: 100%;
      .img-wrapper{
        /*background-image: url("./../img/detail1.png");*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding-bottom: 60%;
        position: relative;
        .back{
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          height: 90px;
          width: 100px;
          justify-content: center;
          align-items: center;
          font-size: 0;
          padding: 20px 36px;/*rem*/
          img{
            height: 40px;
            width: 40px;
          }
        }
      }
      .detail-scroll{
        position: absolute;
        /*overflow: hidden;*/
        width: 100%;
        bottom: 0;
        transform: translate3d(0,0,0);
        background-color: #f4f4f4;
        .scroll-box{
          height: 100%;
          .wrapper{
            background-color: #f4f4f4;
            padding-bottom: 90px;
            .detail-content{
              overflow: hidden;
              .description{
                background-color: #ffffff;
                margin: 30px 20px;
                display: flex;
                .left{
                  @include font-dpr(28px);
                  /*font-size: 28px;!*px*!*/
                  color: #e46555;
                  text-align: center;
                  line-height: 110px;
                  border-right: 1px solid #ededed;
                  margin: 36px 0;
                  padding: 0 50px;
                }
                .right{
                  padding: 36px 70px;
                  p {
                    @include font-dpr(24px);
                    /*font-size: 24px;!*px*!*/
                    color: #737975;
                  }
                }
              }
            }
            .list{
              background-color: #ffffff;
              @include font-dpr(28px);
              line-height: 90px;
              padding: 0 30px;
              color: #3c3c3c;
              font-weight: 600;
              letter-spacing: 2px;/*no*/
              .title{

              }
            }
            .description{
              li{
                background-color: #ffffff;
                img {
                  width: 100%;
                  height: auto;
                }
              }
            }
          }
        }
      }
      .footer{
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: #ffffff;
        padding: 14px 26px;
        p{
          background-color: $orange;
          color: #ffffff;
          text-align: center;
          border-radius: 10px;
          @include font-dpr(24px);
          line-height: 75px;
        }
      }
    }
  }
  .mu-bottom-sheet{
    .mu-list{
      .content-box{
        padding: 50px 28px;
        border-bottom: 1px solid #f1f1f1;
        p{
          line-height: 70px;
          color: #eea148;
          border: 1px solid #eea148;
          border-radius: 5px;
          text-align: center;
          @include font-dpr(28px);
        }
      }
      .attention{
        display: flex;
        text-align: center;
        padding: 20px 20px;
        .choices-radio{
          position: relative;
          #comfirmSign {
            opacity: 0;
            position: absolute;
            width: 50px; /*rem*/
            height: 50px; /*rem*/
            top: 0;
            left: 0;
            z-index: 999;
            /*transform: translateY(50%);*/
            &:checked~.icon{
              background-image: url("../../../../static/img/choosed.png");
            }
          }
          .icon{
            display: block;
            width: 50px;/*rem*/
            height: 50px;/*rem*/
            background: url("../../../../static/img/choose.png") center center no-repeat;
            background-size: 100% 100%;
          }
        }
        p{
          @include font-dpr(24px);
          color: #404542;
          span{
            color: #4397f8;
          }
        }
      }
      .list-footer{
        background-color: #ffffff;
        padding: 14px 26px;
        p{
          background-color: #f3f3f3;
          color: #ffffff;
          text-align: center;
          border-radius: 10px;
          @include font-dpr(24px);
          line-height: 75px;
        }
        .list-active{
          background-color: $orange;
        }
      }
    }
  }
  .detail-enter-active, .detail-leave-active{
    transition: all 0.3s ease;
  }
  .detail-enter, .detail-leave-to{
    transform: translate3d(100%, 0, 0);
  }
  .detail-leave, .detail-enter-to{
    transform: translate3d(0, 0, 0);
  }
</style>
